<route lang="json5" type="page">
{
  layout: 'main',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '咨询报告',
  },
}
</route>

<template>
  <view class="container">
    <wd-form ref="reportForm" :model="formData" :rules="rules">
      <wd-cell-group title="添加咨询报告" border>
        <wd-input
          label="咨询者姓名"
          props="name"
          v-model="formData.name"
          placeholder="请输入用户姓名"
          clearable
        />
        <wd-datetime-picker
          label="咨询日期"
          prop="date"
          v-model="formData.date"
          placeholder="请选择日期"
        />
        <wd-textarea
          label="咨询内容"
          prop="content"
          v-model="formData.content"
          placeholder="请输入咨询内容"
        />
        <wd-textarea
          label="咨询建议"
          prop="suggestion"
          v-model="formData.suggestion"
          placeholder="请输入咨询建议"
        />
      </wd-cell-group>
      <view class="mt-4 ml-2 mr-8">
        <wd-button @click="handleSubmit" block>提交</wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import cache from '@/utils/cache'
import { reportWork } from '@/api/work'

const reportForm = ref()
const formData = reactive<{
  id: string
  name: string
  date: string
  content: string
  suggestion: string
}>({
  id: '',
  name: '',
  date: '',
  content: '',
  suggestion: '',
})

const rules = {
  name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  content: [{ required: true, message: '请输入咨询内容', trigger: 'blur' }],
  suggestion: [{ required: true, message: '请输入咨询建议', trigger: 'blur' }],
}

const handleSubmit = () => {
  reportForm.value.validate().then(({ valid, errors }) => {
    if (!valid) {
      console.log('表单验证失败!', errors)
      return
    }

    formData.id = cache.get('workItem').id
    reportWork(formData)
      .then(() => {
        console.log('咨询报告提交成功!')
        uni.navigateBack()
      })
      .catch(() => {
        console.log('咨询报告提交失败!')
      })
  })
}
</script>

<style lang="scss" scoped></style>
